// OnStyle
//
// Copyright (c)  Daigo Tanaka
// 
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
// 
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
// 
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.

onStyle.output = function(main)
{
var private = {};

this.getHtml = function(excludeStyle)
{
  var container = main.getRootContainer();
  var designer = main.getDesigner();
  container.style.width = designer.getTotalWidth(container) + "px";
  container.style.height = designer.getTotalHeight(container) + "px";

  if (!container) return;

  var console = document.getElementById(onStyle.OutputID);
  if (!console) return;
  console.value = "";

  var key = new RegExp("^((?![=\"]" + container.id + "[\> \"]).)*$", "img");
  var html = container.parentNode.innerHTML.replace(/>/img, ">\n");
  html = html.replace(key, "");
  html = html.replace(/^((?!div ).)*$/img, "");
  html = html.replace(/\n/g, "");
  html += "\n";

  html += container.innerHTML;

  if (excludeStyle){
    html = html.replace(/(<div .*id=.*)style=\".*\"(.*)/img, "$1$2");
    html = html.replace(/(<div .*)style=\".*\"(.*id=.*)/img, "$1$2");
  }
  html += "</div>";
  console.value = html;
  this.showOutputArea();
};

this.getCss = function()
{
  var container = main.getRootContainer();
  var designer = main.getDesigner();
  container.style.width = designer.getTotalWidth(container) + "px";
  container.style.height = designer.getTotalHeight(container) + "px";

  if (!container) return;

  var console = document.getElementById(onStyle.OutputID);
  if (!console) return;
  console.value = "";

  var key = new RegExp("^((?!" + container.id + ").)*$", "img");
  var value = container.parentNode.innerHTML.replace(/>/img, ">\r\n");
  value = value.replace(key, "");
  value = value.replace(/^((?!div ).)*$/img, "");
  value = value.replace(/.*id=\"(.*)\".*style=\"(.*)\".*/img, "#$1{$2}"); // Chrome, Safari
  value = value.replace(/.*id=(.*) .*style=\"(.*)\".*/img, "#$1{$2}"); // ~IE7
  value = value.replace(/.*style=\"(.*)\".*id=(.*)[ >].*/img, "#$2{$1}"); // IE8
  value = value.replace(/\n/g, "");
  value = value.replace(/\r/g, "");
  console.value = value;

  css = container.innerHTML;
  css = css.replace(/>/img, ">\r\n");
  css = css.replace(/^((?!div).)*$/img, "");
  css = css.replace(/^((?!id=).)*$/img, "");
  css = css.replace(/^((?!style=).)*$/img, "");

  css = css.replace(/.*id=\"(.*)\".*style=\"(.*)\".*/img, "#$1{$2}"); // Chrome, Saferi
  css = css.replace(/.*id=(.*) .*style=\"(.*)\".*/img, "#$1{$2}"); // IE7
  css = css.replace(/.*style=\"(.*)\".*id=(.*)[ >].*/img, "#$2{$1}"); // IE8
  css = css.replace(/\n/g, "");
  css = css.replace(/\r/g, "");
  console.value += css;
  console.value = console.value.replace(/}/img, "}\r\n");

  this.showOutputArea();
};

this.showOutputArea = function()
{
  var elementExpert = main.getElementExpert();
  var element = document.getElementById(onStyle.OutputAreaID);
  if (element){
    element.style.visibility = "visible";
    element.style.zIndex = elementExpert.getHighestZIndex();
  }
};

this.hideOutputArea = function()
{
  var element = document.getElementById(onStyle.OutputAreaID);
  if (element){
    element.style.visibility = "hidden";
  }
};

this.createOutputArea = function()
{
document.write('<div id="' + onStyle.DialogID + '" style="position: absolute; top: 10px; left: 10px; width: 300px; padding: 10px; z-index: 10; background-color:#AAAAAA; border-width: 2px; border-style: dashed; border-color: black;"><span style="font-weight:bold;">OnStyle</span> ver. ' + OnStyleVersion + '<br/>Root container ID: <select id="' + onStyle.RootContainerID + '" style="width:90px;"></select>&nbsp;<button style="width:50px;" onclick="onStyle.instances.events.changeRoot();">set</button><br/>Selected Element"s ID: <input type="text" id="' + onStyle.SelectedID + '" value="0" style="width:100px;" disabled/><br/>Position &amp; size<br/>x:<input type="text" id="' + onStyle.PosXID + '" value="0" style="width:30px;" onchange="onStyle.instances.events.updateElementPositionAndSize();"/>y:<input type="text" id="' + onStyle.PosYID + '" value="0" style="width:30px;" onchange="onStyle.instances.events.updateElementPositionAndSize();"/> w:<input type="text" id="' + onStyle.WidthID + '" value="0" style="width:30px;" onchange="onStyle.instances.events.updateElementPositionAndSize();"/>h:<input type="text" id="' + onStyle.HeightID + '" value="0" style="width:30px;" onchange="onStyle.instances.events.updateElementPositionAndSize();"/> z:<button onclick="onStyle.instances.events.pushDownElement();">push down</button><br/><div id="' + onStyle.EditorAreaID + '"><span id="' + onStyle.EditorTitleID + '">Edit</span><br/><script type="text/javascript" language="JavaScript" src="open_wysiwyg/wysiwyg.js"></script> <textarea id="' + onStyle.EditorID + '" onChange="onStyle.instances.events.updateHtml();" style="width:98%; height: 200px;">After the initialization, you can drag this box, too!</textarea><br/><!--<script type="text/javascript" language="javascript1.2">generate_wysiwyg("' + onStyle.EditorID + '");</script>--></div><button onclick="onStyle.instances.events.getHtml(false);">get HTML</button><button onclick="onStyle.instances.events.getHtml(true);">HTML no style</button><button onclick="onStyle.instances.events.getCss();">get CSS</button><br/><a href="' + OnStyleURL + '">Go to OnStyle web page</a></div><div id="' + onStyle.OutputAreaID + '" style="position: absolute; top: 200px; left: 50px; width: 50%; min-height: 300px; margin:auto auto; padding: 20px; text-align:center; background-color: #CCCCCC; border-width: 2px; border-style: dashed; border-color: black;visibility:hidden;"><span style="font-size: 24pt;">Your code is here!</span><br/>Click the texts to highlight. Copy &amp; paste as your new content.<br/><textarea name = "content" id="' + onStyle.OutputID + '" style="width:80%; height:200px;" readonly="readonly" onclick="onStyle.instances.events.selectAll(\'' + onStyle.OutputID + '\');"></textarea><br/><button onclick="onStyle.instances.events.hideOutputArea();">Close</button></div>');
};

};

